<template>
    <view class="bg-white pl-[20rpx] pr-[20rpx] pb-[20rpx]">
        <u-form
            labelPosition="left"
            :model="formData"
            :rules="formRules"
            ref="formRef"
        >
            <u-form-item
                label="原始密码"
                prop="password"
                borderBottom
                labelWidth="80"
            >
                <u-input
                    type="string"
                    name="code"
                    :password="showPassword.show_password"
                    border="bottom"
                    placeholder="请输入原始密码"
                    v-model="formData.password"
                >
                    <template #suffix>
                        <u-icon
                            :name="
                                showPassword.show_password ? 'eye' : 'eye-fill'
                            "
                            size="20"
                            @click="
                                showPassword.show_password =
                                    !showPassword.show_password
                            "
                        ></u-icon>
                    </template>
                </u-input>
            </u-form-item>

            <u-form-item
                label="新的密码"
                prop="new_password"
                borderBottom
                labelWidth="80"
            >
                <u-input
                    type="string"
                    name="code"
                    :password="showPassword.show_new_password"
                    border="bottom"
                    placeholder="请输入新的密码"
                    v-model="formData.new_password"
                >
                    <template #suffix>
                        <u-icon
                            :name="
                                showPassword.show_new_password
                                    ? 'eye'
                                    : 'eye-fill'
                            "
                            size="20"
                            @click="
                                showPassword.show_new_password =
                                    !showPassword.show_new_password
                            "
                        ></u-icon>
                    </template>
                </u-input>
            </u-form-item>

            <u-form-item
                label="确认密码"
                prop="com_password"
                borderBottom
                labelWidth="80"
            >
                <u-input
                    type="string"
                    name="code"
                    :password="showPassword.show_com_password"
                    border="bottom"
                    placeholder="请输入确认密码"
                    v-model="formData.com_password"
                >
                    <template #suffix>
                        <u-icon
                            :name="
                                showPassword.show_com_password
                                    ? 'eye'
                                    : 'eye-fill'
                            "
                            size="20"
                            @click="
                                showPassword.show_com_password =
                                    !showPassword.show_com_password
                            "
                        ></u-icon>
                    </template>
                </u-input>
            </u-form-item>
        </u-form>
        <view class="submit-btn">
            <u-button type="primary" text="确定" @click="submit"></u-button>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { messageSuccess } from "@/utils/message";
import { useRoute } from "@/hooks/useRoute";
import { updatePassword } from "@/api/user";

const formRef = ref(null);

const formData = reactive({
    password: "",
    new_password: "",
    com_password: "",
});

const showPassword = reactive({
    show_password: true,
    show_new_password: true,
    show_com_password: true,
});

const formRules = reactive({
    password: [
        {
            required: true,
            message: "请输入原始密码",
            trigger: ["change", "blur"],
        },
        {
            pattern:
                /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:;'&lt;>?,.\/]).{6,16}$/g,
            transform(value) {
                return String(value);
            },
            message: "6-16位，同时包含字母、数字、特殊符号",
            trigger: ["change", "blur"],
        },
    ],
    new_password: [
        {
            required: true,
            message: "请输入新的密码",
            trigger: ["change", "blur"],
        },
        {
            pattern:
                /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:;'&lt;>?,.\/]).{6,16}$/g,
            transform(value) {
                return String(value);
            },
            message: "6-16位，同时包含字母、数字、特殊符号",
            trigger: ["change", "blur"],
        },
        {
            validator: (rule, value, callback) => {
                return value != formData.password;
            },
            message: "新的密码不可和原始密码相同",
            trigger: ["change", "blur"],
        },
    ],
    com_password: [
        {
            required: true,
            message: "请输入确认密码",
            trigger: ["change", "blur"],
        },
        {
            pattern:
                /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:;'&lt;>?,.\/]).{6,16}$/g,
            transform(value) {
                return String(value);
            },
            message: "6-16位，同时包含字母、数字、特殊符号",
            trigger: ["change", "blur"],
        },
        {
            validator: (rule, value, callback) => {
                return value == formData.new_password;
            },
            message: "确认密码和新的密码不同",
            trigger: ["change", "blur"],
        },
    ],
});

const jumpClick = (url) => {
    useRoute().jumpTo({ url: url });
};

const submit = () => {
    formRef.value.validate().then(async (valid) => {
        if (valid) {
            await updatePassword({
                password: formData.password,
                new_password: formData.new_password,
            });
            messageSuccess("修改成功");
        }
    });
};
</script>

<style lang="scss" scoped>
.submit-btn {
    margin-top: 50rpx;
    padding: 0 20rpx;
}
</style>
